<template>
  <div class="img-click">
      <h3>输入验证码</h3>
      <div class="img-close">
          <img :src="closeImg" alt="" @click="close">
          <span class="btn-info">点击关闭<b></b></span>
      </div>
      <div class="input-form">
          <input type="text" v-model="data" @input="input">
          <img :src="infoImg" alt="" class="imginfo"> 
      </div>
      <div class="input-img">
        <img class="img" :src="imgSrc" alt="" @click="refresh">
      </div> 
      <div class="clear"></div>
      <button @click="submit">确&emsp;认</button>
  </div>
</template>

<script>
import yes from '../assets/yes.svg'
import no from '../assets/no.svg'
import closeImg from '../assets/close.svg'

export default {
  data() {
    return {
        imgSrc:'',
        //input输入的信息
        data:'',
        infoImg:'',
        closeImg:closeImg
    };
  },
  created(){
      //请求验证图片
      this.refresh();
  },
  methods:{
      //刷新
      refresh(){
          this.$ajax(
            'getimg_base64',
            {appid:this.$store.state.appid,operation:this.$store.state.operation,identifying:this.$store.state.identifying},
            (res)=>{
                this.imgSrc = 'data:image/png;base64,' + res.data.data
            },
            (erro)=>{}
        )
      },
      //判断输入信息
      input(){
          this.$ajax(
              'check_virtual',
              {
                    appid:this.$store.state.appid,
                    operation:this.$store.state.operation,
                    type:this.$store.state.type,
                    identifying:this.$store.state.identifying,
                    value:this.data,
              },
              (res)=>{
                  if(res.data.data){
                      this.infoImg = yes;
                  }else{
                      this.infoImg = no;
                  }
              },
              (error)=>{}
          )
      },
      submit(){
          //向父级发送验证值
          let save_value = this.data;
          this.$emit('validation-finish',save_value);
      },
      close(){
          let closeState = true;
          this.$emit('close-state',closeState);
          window.parent.postMessage({
            'event':'validationCancel',
            'data':{
                operation:this.$store.state.operation
            }
          },'*')  
      }
  }
};
</script>

<style scoped>
.img-click{
    padding: 5px 15px 20px;
    background:rgba(88, 79, 96, 0.498039215686275);
    position: relative;
}
.img-click h3{
    color:#fff;
    margin: 5px auto 15px;
    font-weight: normal;
}
.img-close{
    position: absolute;
    top: 10px;
    right: 10px;
}
.img-close img{
    width: 20px;
    height: auto;
}
.btn-info{
    display: inline-block;
    color: #fff;
    font-size: .5rem;
    position: absolute;
    top: -2px;
    right: 25px;
    background: rgba(0,0,0,0.5);
    white-space: nowrap;
    padding: 3px;
    opacity: 0;
}
.btn-info b{
    border-width: 3px;
    border-color: transparent transparent transparent rgba(0,0,0,0.5);
    border-style: solid;
    position: absolute;
    left: 100%; 
    top:40%;
}
.img-close:hover .btn-info{
    opacity: 1;
}
.clear{
    content: '';
    height: 0;
    font-size: 0;
    clear: both;
}
.input-form{
    position: relative;
    width: 55%;
    float: left;
    text-align: left;
}
.input-form input{
    width: 80%;
    height: 30px;
    border: none;
    border-radius: 3px;
    outline: none;
    padding: 0 10px;
    box-sizing: border-box;
}
.input-img{
    width: 40%;
    float: right;
    text-align: right;
}
.imginfo{
    width: 20px;
    height: auto;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -10px;
}
.img{
    width: auto;
    height: 30px;
}
button{
    background: none;
    border: 1px solid #fff;
    padding: 5px 20px;
    border-radius: 3px;
    outline: none;
    color:#fff;
    font-size: 16px;
    margin-top: 15px;
}
</style>
